<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="../../lib/themes/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../lib/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../../lib/css/demo.css">
	<script type="text/javascript" src="../../lib/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../lib/js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../lib/js/jquery.serializeObject.js"></script>
</head>
<style>
</style>

<body>
	<div class="easyui-layout" data-options="fit:true">
		<div data-options="region:'west',split:true" title="新闻管理" style="width:200px;">
			<div class="easyui-accordion" data-options="fit:true">
				<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
					<ul id="tt"></ul>
				</div>
				<div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
					<p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support
						for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can
						be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified,
						then the first panel is taken by default.</p>
				</div>
			</div>

		</div>
		<div data-options="region:'center',title:'新闻详情',iconCls:'icon-ok'">
			<table id="dg"></table>
			<div id="dlg" class="easyui-dialog" title="form 表单" data-options="iconCls:'icon-save',closed:true" style="width:300px;height:400px;padding:10px">
				<!-- closed依赖上一层window -->
				<form id="content" class="easyui-form" data-options="novalidate:true">
					<table cellpadding="5">
						<tr>
							<td>Title:</td>
							<td>
								<input class="easyui-textbox" type="text" name="title" data-options="required:true"></input>
							</td>
						</tr>
						<tr>
							<td>Content:</td>
							<td>
								<input class="easyui-textbox" type="text" name="content" data-options="required:true"></input>
							</td>
						</tr>
						<tr>
							<td>Author:</td>
							<td>
								<input class="easyui-textbox" type="text" id="author" name="author" data-options="required:true"></input>
							</td>
						</tr>
						<tr>
							<td>Self_id:</td>
							<td>
								<input class="easyui-textbox" readonly=”readonly” type="text" name="_id"></input>
							</td>
						</tr>
						<tr>
							<td>Count:</td>
							<td>
								<input class="easyui-textbox" readonly=”readonly” type="text" name="count"></input>
							</td>
						</tr>
						<tr>
							<td>TypeId:</td>
							<td>
								<input readonly=”readonly” type="text" id="typeId" name="typeId"></input>
							</td>
						</tr>
					</table>
				</form>
				<div style="text-align:center;padding:5px">
					<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
					<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a>
				</div>
			</div>
			<div id="tb" style="padding:2px 5px;">
				<a href="javascript:void(0)" onclick="add()" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
				<a href="javascript:void(0)" onclick="deletes()" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>

				keywords:
				<input class="easyui-textbox" id="keywords" name="keywords" style="width:110px">

				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="searchData()" iconCls="icon-search">Search</a>
				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="reload()" iconCls="icon-reload">首页</a>
			</div>
		</div>
	</div>
</body>

</html>
<script> 
	//初始化树
	$('#tt').tree({
		method: 'get',
		url: 'http://localhost:3000/classify/list',
		onClick(node) {
				console.log(node);
			var child = $('#tt').tree('getChildren', node.target);
			console.log(child)
			if (child.length > 0) {
				var len = child.length;
				var newarr = [];
				var arr1 = [];
				for (var i = 0; i < len; i++) {
					$.ajax({
						url: 'http://localhost:3000/news/list',
						method: 'post',
						data: { typeId: child[i]._id },
					}).done(function (res) {
						var leng1 = res.rows.length;
						for (var j = 0; j < leng1; j++) {
							newarr.push(res.rows[j]);
						}
					})
				}
				setTimeout(function () {
					$('#dg').datagrid('loadData', newarr);
				}, 40)
			} else {
				$('#dg').datagrid('load', {
					typeId: node._id,
					address: 'ho',
				});
				$('#dg').datagrid('reload');
			}

			$('#typeId').val(node._id);
		}
	});
	//初始化表单
	$('#dg').datagrid({
		toolbar: '#tb',
		pagination: true,
		fit: true,
		url: 'http://localhost:3000/news/list',
		columns: [[
			{ field: 'ck', checkbox: true },
			{ field: 'typeId', title: '類別', width: 100 },
			{ field: 'title', title: '新聞標題', width: 100 },
			{ field: 'author', title: '作者', width: 100, },
			{ field: 'content', title: '新聞內容', width: 100 },
			{ field: 'count', title: '評論數', width: 100 },
			{
				field: 'operate', title: '操作', width: 200,
				formatter: function (value, row, index) {
					return "<a href='javascript:void(0)' onclick='updata(" + index + ")'>Edit</a> <a href='javascript:void(0)' onclick='removeSelf(this," + index + ")'>delete</a>  <a href='javascript:void(0)' onclick='checkComment(\"" + row._id + "\")'>查看评论</a> "
				}
			}
		]],
		onDblClickRow(index, row) {
			editData(row);
		}
	});
	//添加操作
	function add() {
		$('#content').form('clear');
		$('#dlg').dialog('open')
	}
	//加载表单
	function editData(row) {

		$('#dlg').dialog('open');
		$('#content').form('load', row);
	}
	//更新操作
	function updata(index) {
		console.log(index);
		var rows = $("#dg").datagrid('getRows');
		var row = rows[index];
		editData(row);
	}
	//搜索操作
	function searchData() {
		var val = $('#keywords').val()
		$('#dg').datagrid('load', {
			title: val,
			address: 'ho'
		});
		$('#dg').datagrid('reload');
	}
	//刷新页面
	function reload() {
		$('#dg').datagrid('load', {
			name: '',
			address: 'ho'
		});
		$('#dg').datagrid('reload');
		$("#tt").tree("reload");
	}
	//双击表单 修改
	function submitForm() {
		$('#content').form('submit', {
			onSubmit: function () {

				if ($(this).form('enableValidation').form('validate')) {
					//将表单数据序列化成对象
					var data = $('#content').serializeObject();
					data.count = 0;
					if (data.typeId) {
						if (data._id && data._id.trim().length > 0) {
							$.ajax({
								url: 'http://localhost:3000/news/data/' + data._id,
								type: 'get',
							}).done(function (res) {
								data.count = res.count;
								$.ajax({
									url: 'http://localhost:3000/news/data/' + data._id,
									type: 'put',
									data: data
								}).done(function (res) {

									$('#dlg').dialog('close');
									$('#dg').datagrid('reload');//在向服务器改变数据之后，更新前台数据
								})

							})

						} else {
							delete data._id;
							$.ajax({
								url: 'http://localhost:3000/news/data',
								type: 'post',
								data: data
							}).done(function (res) {
								$('#dlg').dialog('close');
								$('#dg').datagrid('reload');//在向服务器改变数据之后，更新前台数据
							})
						}
					} else {
						$.messager.show({
							title: '信息提示',
							msg: '未選擇類別',
							showType: 'show'
						})
					}
				} else {
					$.messager.show({
						title: '信息提示',
						msg: '表单验证失败',
						showType: 'show'
					})
				}
			}
		});
	}
	function clearForm() {
		$('#content').form('clear');
	}
	//删除单个
	function removeSelf(me, index) {
		var flag = $(me).parents('tr').find('input[type=checkbox]').prop('checked');
		if (flag) {
			if (confirm('你确定要删除么？')) {
				var rows = $("#dg").datagrid('getRows');
				var row = rows[index];
				var id = row._id;
				$.ajax({
					url: 'http://localhost:3000/news/data/' + id,
					type: 'delete',
				}).done(function (res) {
					var data = {};
					data.typeId = id;
					$.ajax({
						url: 'http://localhost:3000/comment/list',
						type: 'post',
						data: data,
					}).done(function (res) {
						console.log(res);
						var arr = [];
						$.each(res.rows, function (index, obj) {
							arr.push(obj._id);
						})
						$.ajax({
							url: 'http://localhost:3000/comment/deletes',
							type: 'post',
							data: { ids: arr.toString() }
						}).done(function (res) {
						console.log(res.msg);
					})
					})
					$("#dg").datagrid("reload");
				})
			}
		} else {
			$.messager.show({
				title: '信息提示',
				msg: 'check 未勾选',
				showType: 'show'
			});
		}
	}
	//删除多个
	function deletes() {
		if (confirm('你确定要删除么？')) {
			var delCheck = $('#dg').datagrid('getChecked');
			var ids = [];
			var length = delCheck.length;
			for (var i = 0; i < length; i++) {
				ids.push(delCheck[i]._id);
			}
			$.ajax({
				url: 'http://localhost:3000/news/deletes',
				type: 'post',
				data: { ids: ids.toString() }
			}).done(function (res) {
				if (res.status === 200) {
					$.messager.show({
						title: '信息提示',
						msg: '删除数据成功',
						showType: 'show'
					});
				} else {
					$.messager.show({
						title: '信息提示',
						msg: '请选择要删除的数据',
						showType: 'show'
					});
				}
				$("#dg").datagrid("reload");
			})
		}
	}

	function checkComment(id) {
		addTab('新闻评论', 'total/comment.html?id=' + id, null, 1);
	}
	function addTab(title, href, iconCls, iframe) {

		var tabPanel = parent.$('#wu-tabs');
		if (!tabPanel.tabs('exists', title)) {
			var content = '<iframe scrolling="auto" frameborder="0"  src="' + href + '" style="width:100%;height:100%;"></iframe>';
			if (iframe) {
				tabPanel.tabs('add', {
					title: title,
					content: content,
					iconCls: iconCls,
					fit: true,
					cls: 'pd3',
					closable: true
				});
			}
			else {
				tabPanel.tabs('add', {
					title: title,
					href: href,
					iconCls: iconCls,
					fit: true,
					cls: 'pd3',
					closable: true
				});
			}
		}
		else {
			tabPanel.tabs('select', title);
			var current_tab = tabPanel.tabs('getSelected');
			tabPanel.tabs('update', {
				tab: current_tab,
				options: {
					content: '<iframe scrolling="auto" frameborder="0"  src="' + href + '" style="width:100%;height:100%;"></iframe>'
				}
			})

		}
	}

</script>